<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
Copyright (c) 2008 Matthew Johnson
Licensed under the MIT License (see license.txt)	
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tweens</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
	
<!-- {NAV} -->
<ul class="nav">
	<li>Markup
		<ul>
			<li><a href="getting_started.html">Getting started</a></li>
			<li><a href="attributes.html">Elements and attributes</a></li>
			<li><a href="actions.html">Events and actions</a></li>
			<li><a href="tweens.html">Tweens</a></li>
			<!--<li><a href="more_tweens.html">More tweens</a></li>-->
			<li><a href="custom_actions.html">Custom actions</a></li>
		</ul>
	</li>
	<li>Widgets
		<ul>
			<li><a href="buttons.html">Buttons</a></li>
			<li><a href="more_buttons.html">More buttons (and tabs)</a></li>
			<li><a href="filmstrip.html">Filmstrip</a></li>
			<li><a href="popup.html">Popup</a></li>
			<li><a href="drag_and_drop.html">Drag and drop</a></li>
			<li><a href="slider.html">Slider</a></li>
			<li><a href="scrollable_text.html">Scrollable text</a></li>
			<li><a href="media_controller.html">Media controller</a></li>
			<li><a href="video.html">Video</a></li>
		</ul>
	</li>
	<li>Example Media
		<ul>
			<li><a href="theories_and_assumptions/theories_and_assumptions.html">Tabs with drag and drop</a></li>
			<li><a href="group_counseling/group_counseling.html">Multiple videos with drag and drop</a></li>
		</ul>
	</li>
	<li><a href="cheatsheet.pdf">Cheatsheet</a></li>
	<li><a href="release_notes.html">Release Notes</a></li>
</ul>
<!-- {/NAV} -->
	
<h1>Tweens</h1>
	
<p>
Tweens can be defined by using the tweens child element for an instance in your ActionML xml file.  Inside the tweens element you can include as many tweens as you like.  Each tween takes the name given to the element.  A simple tween just supplies destination values for any attribute that you would like to tween.  The tween uses a duration of 1 second by default, but you can change it using the duration attribute if you need to do so.  You can also use the delay attribute to delay the time when a tween starts playing.  An action to play the tween is created on the instance.  For example, if you name a tween moveRight the action will be called playMoveRight as in the following example.  When the tween is finished the instance is sent an event to notify it that the tween is complete.  Since the name of our example tween is moveRight the even is called completeMoveRight.
</p>
<p>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=tweens/tweens.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=tweens/tweens.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=tweens/tweens.swf"></embed>
  </object>
  </noscript>
</p>
<p>
If a tween is named after an event handler the tween is automatically plated when the event occurs.  This example appears the same to the viewer as the previous example, but we connected the tweens in a different way in the xml file.  
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=tweens/auto_tweens.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=tweens/auto_tweens.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=tweens/auto_tweens.swf"></embed>
  </object>
  </noscript>
Download the fla for this example <a href="tweens/tweens.fla">here</a>.
</p>

</body>
</html>
